<template>
  <div class="applyIn">
    <div class="formWrapper">
      <van-form
        @submit="onSubmit"
        :validate-first="true"
        @failed="onFailed"
        :show-error-message="false"
      >
        <van-field
          v-model="userName"
          name="userName"
          label="姓名"
          placeholder="请输入"
          :rules="[{ required: true, message: '请填写姓名' }]"
          input-align="right"
        />
        <van-field
          v-model="mobile"
          name="mobile"
          label="手机号"
          type="tel"
          :maxlength="11"
          placeholder="请输入"
          :rules="[{ required: true, message: '请填写正确手机号' }]"
          input-align="right"
        />
        <van-field
          v-model="supplyCat"
          name="supplyCat"
          label="供货品类"
          placeholder="请输入"
          :rules="[{ required: true, message: '请填写供货品类' }]"
          input-align="right"
        />
        <van-field
          v-model="supplyPerMonth"
          name="supplyPerMonth"
          label="预估每月供货量"
          label-width="13em"
          placeholder="请输入"
          :rules="[{ required: true, message: '请填写预估每月供货量' }]"
          input-align="right"
        />
        <van-field
          readonly
          clickable
          name="isInvoice"
          :value="isInvoice"
          label="是否开具发票"
          placeholder="请选择"
          @click="showPicker = true"
          :rules="[{ required: true, message: '请选择是否开具发票' }]"
          input-align="right"
        />
        <van-popup v-model="showPicker" position="bottom">
          <van-picker
            show-toolbar
            :columns="columns"
            @confirm="onConfirm"
            @cancel="showPicker = false"
          />
        </van-popup>
        <van-field
          v-model="remarks"
          rows="2"
          autosize
          label="备注"
          type="textarea"
          maxlength="50"
          placeholder="请输入"
          show-word-limit
        />
        <div class="submit">
          <van-button round block type="info" native-type="submit"></van-button>
        </div>
      </van-form>
    </div>
  </div>
</template>

<script>
import { Toast } from 'vant'
import { apply_post } from '@/api/app/seller'
export default {
  data () {
    return {
      userName: '', // 姓名
      mobile: '', // 手机号
      isInvoice: '', // 是否开具发票
      supplyCat: '', // 供货品类
      supplyPerMonth: '', // 预估每月供货量
      remarks: '', // 备注
      columns: ['是', '否'],
      showPicker: false,
    }
  },
  methods: {
    onSubmit (values) {
      apply_post({
        data: { ...values, isInvoice: values.isInvoice === '是' ? 1 : 0 },
      }).then(
        (data) => {
          this.$notify({
            message: '审核结果将会在2个工作日内以短信形式通知！',
            type: 'success',
            onClose: () => {
              this.$router.push('/index')
            },
          })
        },
        (mes, err) => {
          console.log(mes, err)
          this.$notify({
            message: mes.message,
            type: 'danger',
          })
        }
      )
    },
    onConfirm (value) {
      this.isInvoice = value
      this.showPicker = false
    },
    onFailed (values) {
      console.log(values)
      if (Array.isArray(values.errors)) {
        Toast.fail(values.errors[0].message)
      }
    },
  },
}
</script>

<style lang="scss" src="./styles/apply.scss"></style>
